<template>
  <div>
    <div class="main-wrap">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">实名认证</strong> / <small>Real&nbsp;authentication</small></div>
      </div>
      <hr />
      <!--进度条-->
      <div class="m-progress">
        <div class="m-progress-list">
          <span class="step-1 step">
            <em class="u-progress-stage-bg"></em>
            <i class="u-stage-icon-inner">1<em class="bg"></em></i>
            <p class="stage-name">实名认证</p>
          </span>
          <span class="step-2 step">
            <em class="u-progress-stage-bg"></em>
            <i class="u-stage-icon-inner">2<em class="bg"></em></i>
            <p class="stage-name">完成</p>
          </span>
          <span class="u-progress-placeholder"></span>
        </div>
        <div class="u-progress-bar total-steps-2">
          <div class="u-progress-bar-inner"></div>
        </div>
      </div>
      <form class="am-form am-form-horizontal">
        <div class="am-form-group bind">
          <label for="user-info" class="am-form-label">手机号</label>
          <div class="am-form-content">
            <span id="user-info" v-if="phone">{{phone}}</span>
            <input v-if="!phone" type="text" id="user-name" placeholder="请输入您的手机号" v-model="phone">
          </div>
        </div>
        <div class="am-form-group code">
          <label for="user-code" class="am-form-label">验证码</label>
          <div class="am-form-content">
            <input type="tel" id="user-code" placeholder="短信验证码" v-model="nowVerify">
          </div>
          <a class="btn" href="javascript:void(0);" v-on:click="getVerify(phone)" id="sendMobileCode">
            <div class="am-btn am-btn-danger">验证码</div>
          </a>
        </div>
        <div class="am-form-group">
          <label for="user-name" class="am-form-label">真实姓名</label>
          <div class="am-form-content">
            <input type="text" id="user-name" placeholder="请输入您的真实姓名" v-model="name">
          </div>
        </div>
        <div class="am-form-group">
          <label for="user-IDcard" class="am-form-label">身份证号</label>
          <div class="am-form-content">
            <input type="tel" id="user-IDcard" placeholder="请输入您的身份证信息" v-model="idcard">
          </div>
        </div>
        <div class="info-btn">
          <div class="am-btn am-btn-danger" v-on:click="validate()">保存修改</div>
        </div>

      </form>

    </div>
  </div>
</template>
<script>
export default {
  name: 'idcard',
  data () {
    return {
      phone: null,
      name: null,
      idcard: null,
      nowVerify: null
    }
  },
  components: {

  },
  mounted () {
    this.axios.get("/user/phone").then((res) => {
      var result = res.data;
      if (result.code == 200) {
        this.phone = result.data;
      }
    })
  },
  methods: {
    getVerify (phone) {
      this.axios.get("/user/restVerify", {
        params: {
          phone: phone,
          type: 1
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$layer.msg("验证码发送成功");
        } else {
          this.$layer.msg((result.msg == null || "" ? "验证码发送失败" : result.msg))
        }
      })
    },
    validate () {
      this.axios.post("/user/validateIdcard", {
        phone: this.phone,
        name: this.name,
        idCard: this.idcard,
        nowVerify: this.nowVerify
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$layer.msg("实名认证通过");
          this.$router.push({
            name: 'securityli'
          })
        } else {
          this.$layer.msg((result.msg == null || "" ? "认证失败" : result.msg))
        }
      })
    }
  }
}
</script>
<style scoped>
@import "../../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../../assets/css/personal.css";
@import "../../../../assets/css/stepstyle.css";
</style>
